<template>
  <div class="cartcontrol">
    <transition name="fade-right">
      <div class="cart-decrease" v-if="food.count>0" @click.stop="minus($event)">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition>
    <div class="cart-count" v-if="food.count>0">{{food.count}}</div>
    <div class="cart-add icon-add_circle" @click.stop="plus($event)"></div>
  </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue'
    export default {
      props: {
        food: {
          type: Object
        }
      },
      created () {
        if (!this.food.count) {
          Vue.set(this.food, 'count', 0)
        }
      },
      methods: {
        plus (event) {
          if (!event._constructed) {
            return
          }
          this.food.count += 1
          this.$emit('add', event.target)
        },
        minus (event) {
          if (!event._constructed) {
            return
          }
          if (this.food.count > 0) {
            this.food.count -= 1
          }
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .cartcontrol
    .cart-decrease
      display: inline-block
      padding: 6px 0
      font-size: 24px
      color: rgb(0,160,220)
      .inner
        display: inline-block
      &.fade-right-enter-active, &.fade-right-leave-active
        transition: all .5s
        .inner
          transition: all .5s
      &.fade-right-enter, &.fade-right-leave-active
        opacity: 0
        transform:translate3D(24px,0,0);
        -webkit-transform:translate3D(24px,0,0);
        .inner
          -webkit-transform:rotate(180deg) translate3D(0,0,0);
    .cart-count
      display: inline-block
      vertical-align: top
      line-height: 24px
      padding-top: 6px
      font-size: 10px
      color: rgb(147,153,159)
    .cart-add
      display: inline-block
      padding: 7px 0
      font-size: 24px
      color: rgb(0,160,220)
</style>
